/**
 * 轮播类
 */
class Swiper {
  constructor(id) {
    this.swiperWraper = document.querySelector(id) //相框
    this.ulSwiper = this.swiperWraper.querySelector('.swiper') // 相片
    this.liEles = this.swiperWraper.querySelectorAll('.swiper li') //相片元素
    this.nextEle = this.swiperWraper.querySelector('#next') //下一张
    this.prevEle = this.swiperWraper.querySelector('#prev') //上一张
    this.olLiEles = this.swiperWraper.querySelectorAll('.swiper-pointer li') // 指示器元素
    this.swiperWidth = parseInt(window.getComputedStyle(this.swiperWraper).width ) //相框宽
    this.count = this.liEles.length //相片个数
    this.isMove = false //是否正在运动 
    this.index = 0 //指示器位置
  }

  /**
   * 初始化
   */
  init(){
    this.ulSwiper.style.width = this.count * this.swiperWidth + 'px' //所有相片水平排总长度
    this.ulSwiper.style.left = -this.swiperWidth + 'px' // 初始化第一个轮播图片
  }
  /**
   * 生成指示器
   */
  onPointer(){
      
  }

  /**
   * 下一张
   */
  onNext(){
    this.nextEle.onclick = () => {
        //判断是否运动
        if (this.isMove == true) {
            return
        }
        if (++this.index >= this.olLiEles.length) {
            this.index = 0
        }
        this.setCurrentActive()
        this.move(this.ulSwiper, {
            time: 1000,
            offset: -this.swiperWidth,
            rate: 30
        })
    }
  }

  /**
   * 上一张
   */
  onPrev(){
    this.prevEle.onclick = () => {
        if (this.isMove == true) {
            return
        }
        if (--this.index < 0) {
            this.index = this.olLiEles.length - 1
        }
        this.setCurrentActive()
        this.move(this.ulSwiper, {
            time: 1000,
            offset: this.swiperWidth,
            rate: 30
        })
    }
  }

  /**
   *自动轮播
   */
  autoPlay(){
    let _this = this
    setInterval(()=>{
        _this.move(_this.ulSwiper, {
            time: 1000,
            offset: -_this.swiperWidth,
            rate: 30
        })
    }, 2000)
  }

  /**
   * 清除指示器选中样式
   * @param {*} divEle 
   * @param {*} obj 
   */
  clearActive(){
    for (let i = 0; i < this.olLiEles.length; i++) {
        this.olLiEles[i].classList.remove('active')
    }
  }
  /**
   * 设置当前指示器选中
   * @param {*} divEle 
   * @param {*} obj 
   */
  setCurrentActive(){
    this.clearActive()
    for (let i = 0; i < this.olLiEles.length; i++) {
        if (i == this.index) {
            this.olLiEles[i].classList.add('active')
            break;
        }
    }
  }

  /**
   *  运动函数
   *   divEle ：运动元素
   *   obj: 运动参数
   */
  move(divEle, obj = {
      time: 1000, // 运动时间
      offset: -this.swiperWidth, //偏移量  负值: 向左, 正值:向右
      rate: 20 // 运动速度
    }) {

    this.isMove = true //正在运动
    divEle.style.left = window.getComputedStyle(divEle).left
    let time = obj.time //运动总时间
    let offset = obj.offset //移动偏移量
    let rate = obj.rate //运动速度
    let distance = (rate * offset) / time //每次移动距离

    let goal = parseInt(divEle.style.left) + offset //目标位置

    let timer = setInterval(() => {
      if (
        parseInt(divEle.style.left) == goal ||
        Math.abs(Math.abs(goal) - Math.abs(parseInt(divEle.style.left))) <
          Math.abs(distance)
      ) {
        divEle.style.left = goal + 'px'
        //结束运动,关闭定时器
        clearInterval(timer)
        //判断是否运动到最后一个元素
        if (parseInt(divEle.style.left) == -(this.count - 1) * this.swiperWidth) {
          //向右移动边界判断
          divEle.style.left = -this.swiperWidth + 'px'
        } else if (parseInt(divEle.style.left) == 0) {
          //向左移动边界判断
          divEle.style.left = -(this.count - 2) * this.swiperWidth + 'px'
        }

        this.isMove = false //运动结束
      } else {
        divEle.style.left = parseInt(divEle.style.left) + distance + 'px'
      }
    }, rate)
  }
}
